<template>
  <div class="w-full h-auto relative">
    <div id="mapcontainer" class="w-full h-[500px]"></div>
    <div
      class="w-full h-[500px] absolute top-0 left-0 bg-[#0d289180] cursor-pointer"
      @click="toUrl"
    ></div>
    <section class="w-[80%] mt-[-220px] mb-[20px] mx-auto relative z-10">
      <article class="text-white pl-8">
        <h4 class="w-full text-3xl">
          <span
            v-for="(char, index) in '联系我们'"
            :key="index"
            :style="{ animationDelay: `${index * 40 + 100}ms` }"
            class="slide-in-char"
          >
            {{ char }}
          </span>
        </h4>
        <p class="mt-2 leading-6">
          <span
            v-for="(char, index) in 'Contact&nbsp;Us'"
            :key="index"
            :style="{ animationDelay: `${index * 40 + 100}ms` }"
            class="slide-in-char"
          >
            {{ char }}
          </span>
        </p>
      </article>
      <section class="w-full mt-[60px] bg-white p-14 relative rounded shadow-md contact-box">
        <div class="flex flex-col space-y-4">
          <div class="border-b-1 border-dashed border-[#EAEAEA] pb-2">
            <h5 class="text-lg font-bold text-[#0D2891] mb-2">地址</h5>
            <p>中冶·中央公园</p>
          </div>
          <div class="border-b-1 border-dashed border-[#EAEAEA] pb-2">
            <h5 class="text-lg font-bold text-[#0D2891] mb-2">电话</h5>
            <p>+86 1234567890</p>
          </div>
          <div class="border-b-1 border-dashed border-[#EAEAEA] pb-2">
            <h5 class="text-lg font-bold text-[#0D2891] mb-2">邮箱</h5>
            <p>contact@example.com</p>
          </div>
          <div class="border-b-1 border-dashed border-[#EAEAEA] pb-2">
            <h5 class="text-lg font-bold text-[#0D2891] mb-2">工作时间</h5>
            <p>周一至周五，9:00 - 18:00</p>
          </div>
        </div>
        <div class="mt-8 w-[50%] mx-auto">
          <a-form
            :model="form"
            :style="{ width: '600px' }"
            layout="vertical"
            @submit="handleSubmit"
          >
            <a-form-item
              field="name"
              label="姓名"
              :rules="[
                { required: true, message: '请输入您的名称' },
                { minLength: 2, maxLength: 10, message: '名称长度在2-10个字符之间' },
              ]"
            >
              <a-input v-model="form.name" placeholder="请输入您的名称" />
            </a-form-item>
            <a-form-item
              field="email"
              label="邮箱"
              :rules="[
                { required: true, message: '请输入邮箱地址' },
                { type: 'email', message: '请输入正确的邮箱地址' },
              ]"
            >
              <a-input v-model="form.email" placeholder="请输入邮箱地址" />
            </a-form-item>
            <a-form-item
              field="mark"
              label="留言"
              :rules="[
                { required: false, message: '请输入留言信息' },
                { maxLength: 200, message: '留言长度在0-200个字符之间' },
              ]"
            >
              <a-textarea
                v-model="form.mark"
                placeholder="请输入留言信息"
                max-length="200"
                show-word-limit
                allow-clear
                auto-size
              />
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" type="primary" long>提交</a-button>
            </a-form-item>
          </a-form>
        </div>
      </section>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue'

declare global {
  interface Window {
    _AMapSecurityConfig?: {
      securityJsCode: string
    }
  }
}
import AMapLoader from '@amap/amap-jsapi-loader'

const map = ref(null)

const form = reactive({
  name: '',
  email: '',
  mark: '',
})
const handleSubmit = (data: any) => {
  console.log(data)
}

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE || '87bab7d5a43ae6ed5b85d45330b75cd1',
  }
  AMapLoader.load({
    key: import.meta.env.VITE_AMAP_KEY || 'a4d50ef69233376b7bfca217ada6f465', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.ElasticMarker'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map.value = new AMap.Map('mapcontainer', {
        // pitch: 30, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', //地图模式
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [2, 20], //地图显示的缩放级别范围
        center: [103.872282, 30.824943], //初始地图中心经纬度
      })
      //创建一个 Marker 实例：
      const marker = new AMap.Marker({
        position: new AMap.LngLat(103.872282, 30.824943), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '中冶·中央公园',
        label: {
          offset: new AMap.Pixel(-2, -2), //修改label相对于maker的位置
          content: '中冶·中央公园',
          direction: 'top', //方向，默认值为“top”
        },
      })
      //设置Marker的图标
      map.value?.add(marker)
    })
    .catch((e) => {
      console.log(e)
    })
})
const toUrl = () => {
  window.open(
    'https://uri.amap.com/marker?position=103.872282,30.824943&name=中冶·中央公园&src=mypage&coordinate=gaode&callnative=0',
    '_blank',
  )
}

onUnmounted(() => {
  map.value?.destroy()
})
</script>

<style scoped lang="less">
.contact-box {
  &::before {
    content: '';
    position: absolute;
    left: 25px;
    top: -25px;
    width: 6px;
    height: 0; /* 初始高度为 0 */
    background-color: #0d2891;
    animation: slideDown 0.3s ease-in forwards; /* 应用动画 */
    z-index: 2;
  }
  &::after {
    content: '';
    position: absolute;
    left: 25px;
    width: 6px;
    height: 330px;
    bottom: 62px;
    top: 25px;
    background-color: #da251e;
  }
}
@keyframes slideInChar {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-char {
  display: inline-block;
  animation: slideInChar 0.5s ease-out forwards;
}
@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: 50px;
  }
}
</style>
